<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>es模块化完整引入</h1>
    <div id="app"></div>
    <link rel="stylesheet" href="../../dist/assets/entry.f4e87f69.css">
    <script type="module">
        // 完整引入
        import { createApp } from "vue/dist/vue.esm-bundler.js";
        import BrevityUI, { BasicComponents, SingleFileComponents, TSXComponents } from "../../dist/brevity-ui.mjs";
        createApp({
            template: `
                <BasicComponents/>
                <SingleFileComponents/>
                <TSXComponents/>
                <div style="margin-bottom:20px;">
                    <BasicComponents color="blue">主要按钮</BasicComponents>
                    <BasicComponents color="green">绿色按钮</BasicComponents>
                    <BasicComponents color="gray">灰色按钮</BasicComponents>
                    <BasicComponents color="yellow">黄色按钮</BasicComponents>
                    <BasicComponents color="red">红色按钮</BasicComponents>
                </div>
                <div style="margin-bottom:20px;"
                >
                    <BasicComponents color="blue" plain>朴素按钮</BasicComponents>
                    <BasicComponents color="green" plain>绿色按钮</BasicComponents>
                    <BasicComponents color="gray" plain>灰色按钮</BasicComponents>
                    <BasicComponents color="yellow" plain>黄色按钮</BasicComponents>
                    <BasicComponents color="red" plain>红色按钮</BasicComponents>
                </div>
                <div style="margin-bottom:20px;">
                    <BasicComponents size="small" plain>小按钮</BasicComponents>
                    <BasicComponents size="medium" plain>中按钮</BasicComponents>
                    <BasicComponents size="large" plain>大按钮</BasicComponents>
                </div>
                <div style="margin-bottom:20px;">
                    <BasicComponents color="blue" round plain icon="search">搜索按钮</BasicComponents>
                    <BasicComponents color="green" round plain icon="edit">编辑按钮</BasicComponents>
                    <BasicComponents color="gray" round plain icon="check">成功按钮</BasicComponents>
                    <BasicComponents color="yellow" round plain icon="message">提示按钮</BasicComponents>
                    <BasicComponents color="red" round plain icon="delete">删除按钮</BasicComponents>
                </div>
                <div style="margin-bottom:20px;">
                    <BasicComponents color="blue" round plain icon="search"></BasicComponents>
                    <BasicComponents color="green" round plain icon="edit"></BasicComponents>
                    <BasicComponents color="gray" round plain icon="check"></BasicComponents>
                    <BasicComponents color="yellow" round plain icon="message"></BasicComponents>
                    <BasicComponents color="red" round plain icon="delete"></BasicComponents>
                </div>
            `
        }).use(BrevityUI).mount('#app')
    </script>
</body>

</html>